<template>
  <div>
    <ul
      class="list"
      style=""
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled">
      <li v-for="i in count" class="list-item">{{ i }} <span @click='qqqqq'>click</span></li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        count: 10,
        loading: false
      }
    },

    watch:{
      count() {
        this.count > 50 ? this.count = 1 : this.count
        if (this.count > 50) {
          // this.loading = true
          // this.noMore = false
        }
      }
    },

    computed: {
      noMore () {
        return this.count >= 60
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    methods: {

      qqqqq() {
        this.count = 0
      },

      load () {
        this.loading = true
        setTimeout(() => {
          this.count += 11
          this.loading = false
        }, 2000)
      }
    }
  }
</script>


<style>
  li{
    height: 50px;

  }
</style>
